
<template>
  <div class="dashboard-container">
    <el-row type="flex">
      <!-- 第一个 -->
      <el-col :span="6">
        <el-card class="box-card">
          <div class="header">
            <span>总答题数量</span>
            <el-tooltip content="指标说明" placement="top">
              <i class="el-icon-warning"></i>
            </el-tooltip>
          </div>
          <div class="total">260,560</div>
          <div class="trends">
            <span>
              周同比 12%
              <i class="el-icon-caret-top" style="color: #ff0000;"></i>
            </span>
            <span>
              日环比 11%
              <i class="el-icon-caret-bottom" style="color: #008018;"></i
            ></span>
          </div>
          <div class="hr"></div>
          <div class="footer">
            <span>日答题数量</span>
            <span>12,423</span>
          </div>
        </el-card>
      </el-col>

      <!-- 雷达图 -->
      <el-col :span="6">
        <el-card class="box-card">
          <div class="header">
            <span>试题方向</span>
            <el-tooltip content="指标说明" placement="top">
              <i class="el-icon-warning"></i>
            </el-tooltip>
          </div>
          <!-- 放置雷达图 -->
          <radar />
          <div class="hr"></div>
          <div class="footer">
            <span>试题库数量</span>
            <span>10,234</span>
          </div>
        </el-card>
      </el-col>

      <!-- 饼状图 -->
      <el-col :span="6">
        <el-card class="box-card">
          <div class="header">
            <span>试题学科分布</span>
            <el-tooltip content="指标说明" placement="top">
              <i class="el-icon-warning"></i>
            </el-tooltip>
          </div>
          <!-- 放置饼状图 -->
          <pie-chart />
          <div class="hr"></div>
          <div class="footer">
            <span>前端试题数量</span>
            <span>5,234</span>
          </div>
        </el-card>
      </el-col>

      <!-- 柱状 图 -->
      <el-col :span="6">
        <el-card class="box-card">
          <div class="header">
            <span>上周试题新增</span>
            <el-tooltip content="指标说明" placement="top">
              <i class="el-icon-warning"></i>
            </el-tooltip>
          </div>
          <!-- 放置柱状图 -->
          <histogram />
          <div class="hr"></div>
          <div class="footer">
            <span>上周新增总量</span>
            <span>1,234</span>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 下方详情  -->
    <el-card class="card">
      <el-tabs>
        <el-tab-pane label="前端学科">
          <el-row type="flex">
            <el-col :span="16">
              <!-- 放置前端折线图 -->
              <rear />
            </el-col>

            <el-col :span="8">
              <el-row style="margin-top: 10px; font-weight: 700">
                <el-col><span>学科试题数量排名</span></el-col>
              </el-row>

              <el-row type="flex" style="margin-top: 10px">
                <el-col :span="4"><span class="ranking">1</span></el-col>
                <el-col :span="13"><span>前端</span></el-col>
                <el-col :span="7"><span>5,234</span></el-col>
              </el-row>

              <el-row type="flex" style="margin-top: 10px">
                <el-col :span="4"><span class="ranking">2</span></el-col>
                <el-col :span="13"><span>java</span></el-col>
                <el-col :span="7"><span>3,210</span></el-col>
              </el-row>

              <el-row type="flex" style="margin-top: 10px">
                <el-col :span="4"><span class="ranking">3</span></el-col>
                <el-col :span="13"><span>大数据</span></el-col>
                <el-col :span="7"><span>1,294</span></el-col>
              </el-row>

              <el-row type="flex" style="margin-top: 10px">
                <el-col :span="4"><span class="rankings">4</span></el-col>
                <el-col :span="13"><span>c++</span></el-col>
                <el-col :span="7"><span>1,001</span></el-col>
              </el-row>

              <el-row type="flex" style="margin-top: 10px">
                <el-col :span="4"><span class="rankings">5</span></el-col>
                <el-col :span="13"><span>UI</span></el-col>
                <el-col :span="7"><span>934</span></el-col>
              </el-row>

              <el-row type="flex" style="margin-top: 10px">
                <el-col :span="4"><span class="rankings">6</span></el-col>
                <el-col :span="13"><span>php</span></el-col>
                <el-col :span="7"><span>856</span></el-col>
              </el-row>

              <el-row type="flex" style="margin-top: 10px">
                <el-col :span="4"><span class="rankings">7</span></el-col>
                <el-col :span="13"><span>python</span></el-col>
                <el-col :span="7"><span>403</span></el-col>
              </el-row>

              <el-row type="flex" style="margin-top: 10px">
                <el-col :span="4"><span class="rankings">8</span></el-col>
                <el-col :span="13"><span>测试</span></el-col>
                <el-col :span="7"><span>122</span></el-col>
              </el-row>
            </el-col>
          </el-row>
        </el-tab-pane>

        <el-tab-pane label="JAVA学科">
          <el-row type="flex" justify="space-between">
            <el-col :span="12">
              <!-- 放置JAVA折线图 -->
              <lead />
            </el-col>

            <el-col :span="8">
              <el-row style="margin-top: 10px; font-weight: 700">
                <el-col><span>学科试题数量排名</span></el-col>
              </el-row>

              <el-row type="flex" style="margin-top: 10px">
                <el-col :span="4"><span class="ranking">1</span></el-col>
                <el-col :span="13"><span>前端</span></el-col>
                <el-col :span="7"><span>5,234</span></el-col>
              </el-row>

              <el-row type="flex" style="margin-top: 10px">
                <el-col :span="4"><span class="ranking">2</span></el-col>
                <el-col :span="13"><span>java</span></el-col>
                <el-col :span="7"><span>3,210</span></el-col>
              </el-row>

              <el-row type="flex" style="margin-top: 10px">
                <el-col :span="4"><span class="ranking">3</span></el-col>
                <el-col :span="13"><span>大数据</span></el-col>
                <el-col :span="7"><span>1,294</span></el-col>
              </el-row>

              <el-row type="flex" style="margin-top: 10px">
                <el-col :span="4"><span class="rankings">4</span></el-col>
                <el-col :span="13"><span>c++</span></el-col>
                <el-col :span="7"><span>1,001</span></el-col>
              </el-row>

              <el-row type="flex" style="margin-top: 10px">
                <el-col :span="4"><span class="rankings">5</span></el-col>
                <el-col :span="13"><span>UI</span></el-col>
                <el-col :span="7"><span>934</span></el-col>
              </el-row>

              <el-row type="flex" style="margin-top: 10px">
                <el-col :span="4"><span class="rankings">6</span></el-col>
                <el-col :span="13"><span>php</span></el-col>
                <el-col :span="7"><span>856</span></el-col>
              </el-row>

              <el-row type="flex" style="margin-top: 10px">
                <el-col :span="4"><span class="rankings">7</span></el-col>
                <el-col :span="13"><span>python</span></el-col>
                <el-col :span="7"><span>403</span></el-col>
              </el-row>

              <el-row type="flex" style="margin-top: 10px">
                <el-col :span="4"><span class="rankings">8</span></el-col>
                <el-col :span="13"><span>测试</span></el-col>
                <el-col :span="7"><span>122</span></el-col>
              </el-row>
            </el-col>
          </el-row>
        </el-tab-pane>
      </el-tabs>
      <div class="text">前端与java学科试题走势图</div>
    </el-card>
  </div>
</template>

<script>
import Radar from './components/radar.vue'
import PieChart from './components/pieChart.vue'
import Histogram from './components/histogram.vue'
import Rear from './components/rear.vue'
import Label from '../external-link/components/label.vue'
import Lead from './components/lead.vue'
export default {
  name: '',
  components: {
    Radar,
    PieChart,
    Histogram,
    Rear,
    Label,
    Lead
  },
  props: {},
  data() {
    return {}
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {}
}
</script>
<style lang="scss" scoped>
.dashboard-container {
  margin: 20px;
  .box-card {
    margin: 10px;
    .total {
      font-size: 30px;
      height: 140px;
      line-height: 140px;
      padding-left: 25px;
    }
    .header {
      span {
        color: #97b0d5;
        font-size: 14px;
      }
      i {
        color: #97a8be;
        float: right;
        margin-right: 10px;
      }
    }
    .trends {
      font-size: 14px;
      span {
        margin-left: 10px;
      }
    }
    .hr {
      border-top: 1px solid #e8e8e8;
      margin: 10px 5px;
    }
    .footer {
      span {
        font-size: 12px;
        color: #303133;
        margin: 0 8px;
      }
    }
  }
  .card {
    margin: 10px;
    position: relative;
    .text {
      position: absolute;
      top: 25px;
      right: 20px;
      color: #999;
    }
    .ranking {
      display: block;
      // position: relative;
      // top: 0;
      // left: 0;
      width: 20px;
      height: 20px;
      line-height: 20px;
      text-align: center;
      background-color: #354657;
      border-radius: 50%;
      color: #fff;
      font-weight: 700;
    }
    .rankings {
      display: block;
      // position: relative;
      // top: 0;
      // left: 0;
      width: 20px;
      height: 20px;
      line-height: 20px;
      text-align: center;
      background-color: #f5f5f5;
      border-radius: 50%;
      color: #565656;
      font-weight: 700;
    }
  }
}
</style>
